<template>
  <main
    class="el-main bg-light"
    style="padding-bottom: 60px; position: relative"
  >
    <div>
      <div class="el-row" style="margin-left: -10px; margin-right: -10px">
        <div
          class="el-col el-col-6"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-hover-shadow">
            <div class="el-card__body">
              <div class="d-flex align-items-center">
                <i
                  class="h4 mb-0 text-white text-center mr-3 el-icon-user-solid bg-primary"
                  style="width: 40px; height: 40px; line-height: 40px"
                ></i>
                <div>
                  <h4 class="mb-1">30</h4>
                  <small class="text-muted">关注人数(个)</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-6"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-hover-shadow">
            <!---->
            <div class="el-card__body">
              <div class="d-flex align-items-center">
                <i
                  class="h4 mb-0 text-white text-center mr-3 el-icon-s-finance bg-success"
                  style="width: 40px; height: 40px; line-height: 40px"
                ></i>
                <div>
                  <h4 class="mb-1">120</h4>
                  <small class="text-muted">订单总数(笔)</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-6"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-hover-shadow">
            <!---->
            <div class="el-card__body">
              <div class="d-flex align-items-center">
                <i
                  class="h4 mb-0 text-white text-center mr-3 el-icon-s-order bg-danger"
                  style="width: 40px; height: 40px; line-height: 40px"
                ></i>
                <div>
                  <h4 class="mb-1">4183.80</h4>
                  <small class="text-muted">今日订单总金额(元)</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-6"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-hover-shadow">
            <!---->
            <div class="el-card__body">
              <div class="d-flex align-items-center">
                <i
                  class="h4 mb-0 text-white text-center mr-3 el-icon-s-data bg-warning"
                  style="width: 40px; height: 40px; line-height: 40px"
                ></i>
                <div>
                  <h4 class="mb-1">100</h4>
                  <small class="text-muted">本月销量(笔)</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-3 el-row" style="margin-left: -10px; margin-right: -10px">
        <div
          class="d-flex flex-column el-col el-col-12"
          style="
            padding-left: 10px;
            padding-right: 10px;
            height: 370px;
            justify-content: space-between;
          "
        >
          <div class="el-card box-card is-never-shadow">
            <div class="el-card__header">
              <div class="clearfix">
                <span>店铺及商品提示</span
                ><button
                  type="button"
                  class="el-button el-button--text"
                  style="float: right; padding: 3px 0px"
                >
                  <!----><!----><span>需要关注的店铺信息及待处理事项</span>
                </button>
              </div>
            </div>
            <div class="el-card__body">
              <div class="row">
                <div class="col-3">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">64</h4>
                    <small class="text-muted"> 出售中</small>
                  </button>
                </div>
                <div class="col-3">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">10</h4>
                    <small class="text-muted"> 待回复</small>
                  </button>
                </div>
                <div class="col-3">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">0</h4>
                    <small class="text-muted"> 库存预警</small>
                  </button>
                </div>
                <div class="col-3">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">3</h4>
                    <small class="text-muted"> 仓库中</small>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="el-card box-card is-never-shadow">
            <div class="el-card__header">
              <div class="clearfix">
                <span>交易提示</span
                ><button
                  type="button"
                  class="el-button el-button--text"
                  style="float: right; padding: 3px 0px"
                >
                  <span>需要立即处理的交易订单</span>
                </button>
              </div>
            </div>
            <div class="el-card__body">
              <div class="row">
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">0</h4>
                    <small class="text-muted"> 待付款</small>
                  </button>
                </div>
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">10</h4>
                    <small class="text-muted"> 待发货</small>
                  </button>
                </div>
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">0</h4>
                    <small class="text-muted"> 已发货</small>
                  </button>
                </div>
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">3</h4>
                    <small class="text-muted"> 已收货</small>
                  </button>
                </div>
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">3</h4>
                    <small class="text-muted"> 退款中</small>
                  </button>
                </div>
                <div class="col-2">
                  <button class="btn btn-light w-100">
                    <h4 class="mb-1">3</h4>
                    <small class="text-muted"> 待售后</small>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-12"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-never-shadow" style="height: 370px">
            <!---->
            <div class="el-card__body">
               <div id="main"  style="width: 591px;
                      height: 270px; "></div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-3 el-row" style="margin-left: -10px; margin-right: -10px">
        <div
          class="el-col el-col-12"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-never-shadow">
            <div class="el-card__header">
              <div class="clearfix">
                <span>销售情况统计</span
                ><button
                  type="button"
                  class="el-button el-button--text"
                  style="float: right; padding: 3px 0px"
                >
                  <!----><!----><span
                    >按周期统计商家店铺的订单量和订单金额</span
                  >
                </button>
              </div>
            </div>
            <div class="el-card__body">
              <div class="media align-items-center border">
                <span class="py-4 px-3 bg-light border-right"> 昨日销量</span>
                <div class="media-body">
                  <div class="border-bottom pl-3 pb-1 mb-1">
                    <span>订单金额(元) </span> 12
                  </div>
                  <div class="pl-3"><span>订单量(件) </span> 12</div>
                </div>
              </div>
              <div class="media align-items-center border mt-3">
                <span class="py-4 px-3 bg-light border-right"> 本月销量</span>
                <div class="media-body">
                  <div class="border-bottom pl-3 pb-1 mb-1">
                    <span>订单金额(元) </span> 12
                  </div>
                  <div class="pl-3"><span>订单量(件) </span> 12</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="el-col el-col-12"
          style="padding-left: 10px; padding-right: 10px"
        >
          <div class="el-card box-card is-never-shadow">
            <div class="el-card__header">
              <div class="clearfix">
                <span>单品销售排名</span
                ><button
                  type="button"
                  class="el-button el-button--text"
                  style="float: right; padding: 3px 0px"
                >
                  <!----><!----><span
                    >按周期统计商家店铺的订单量和订单金额</span
                  >
                </button>
              </div>
            </div>
            <div class="el-card__body">
              <div
                class="el-table el-table--fit el-table--border el-table--scrollable-y el-table--enable-row-hover el-table--enable-row-transition"
                style="width: 100%; height: 200px"
              >
                <div class="hidden-columns">
                  <div></div>
                  <div></div>
                  <div></div>
                </div>
                <div class="el-table__header-wrapper">
                  <table
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    class="el-table__header"
                    style="width: 590px"
                  >
                    <colgroup>
                      <col name="el-table_18_column_69" width="50" />
                      <col name="el-table_18_column_70" width="480" />
                      <col name="el-table_18_column_71" width="50" />
                      <col name="gutter" width="10" />
                    </colgroup>
                    <thead class="has-gutter">
                      <tr class="">
                        <th
                          colspan="1"
                          rowspan="1"
                          class="el-table_18_column_69 is-leaf"
                        >
                          <div class="cell">#</div>
                        </th>
                        <th
                          colspan="1"
                          rowspan="1"
                          class="el-table_18_column_70 is-leaf"
                        >
                          <div class="cell">商品信息</div>
                        </th>
                        <th
                          colspan="1"
                          rowspan="1"
                          class="el-table_18_column_71 is-leaf"
                        >
                          <div class="cell">销量</div>
                        </th>
                        <th class="gutter" style="width: 10px"></th>
                      </tr>
                    </thead>
                  </table>
                </div>
                <div
                  class="el-table__body-wrapper is-scrolling-none"
                  style="height: 149px"
                >
                  <table
                    cellspacing="0"
                    cellpadding="0"
                    border="0"
                    class="el-table__body"
                    style="width: 580px"
                  >
                    <colgroup>
                      <col name="el-table_18_column_69" width="50" />
                      <col name="el-table_18_column_70" width="480" />
                      <col name="el-table_18_column_71" width="50" />
                    </colgroup>
                    <tbody>
                      <tr class="el-table__row">
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_69"
                        >
                          <div class="cell"><div>1</div></div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_70"
                        >
                          <div class="cell">
                            小天鹅（LittleSwan）滚筒洗衣机...
                          </div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_71"
                        >
                          <div class="cell">9</div>
                        </td>
                      </tr>
                      <tr class="el-table__row">
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_69"
                        >
                          <div class="cell"><div>2</div></div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_70"
                        >
                          <div class="cell">
                            小天鹅（LittleSwan）滚筒洗衣机...
                          </div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_71"
                        >
                          <div class="cell">9</div>
                        </td>
                      </tr>
                      <tr class="el-table__row">
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_69"
                        >
                          <div class="cell"><div>3</div></div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_70"
                        >
                          <div class="cell">
                            小天鹅（LittleSwan）滚筒洗衣机...
                          </div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_71"
                        >
                          <div class="cell">9</div>
                        </td>
                      </tr>
                      <tr class="el-table__row">
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_69"
                        >
                          <div class="cell"><div>4</div></div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_70"
                        >
                          <div class="cell">
                            小天鹅（LittleSwan）滚筒洗衣机...
                          </div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_71"
                        >
                          <div class="cell">9</div>
                        </td>
                      </tr>
                      <tr class="el-table__row">
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_69"
                        >
                          <div class="cell"><div>5</div></div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_70"
                        >
                          <div class="cell">
                            小天鹅（LittleSwan）滚筒洗衣机...
                          </div>
                        </td>
                        <td
                          rowspan="1"
                          colspan="1"
                          class="el-table_18_column_71"
                        >
                          <div class="cell">9</div>
                        </td>
                      </tr>
                      <!---->
                    </tbody>
                  </table>
                  <!----><!---->
                </div>
                <!----><!----><!----><!---->
                <div
                  class="el-table__column-resize-proxy"
                  style="display: none"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!---->
    <div class="el-loading-mask" style="display: none">
      <div class="el-loading-spinner">
        <svg viewBox="25 25 50 50" class="circular">
          <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg
        ><!---->
      </div>
    </div>
  </main>
</template>
<script>
export default {
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      this.$echarts.init(document.getElementById('main')).setOption({
        
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "Video Ads",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "Direct",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "Search Engine",
            type: "line",
            stack: "Total",
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      });
    },
  },
};
</script>
<style >
.main {
  height: 1000px;
}
</style>
